<script lang="ts" setup>
import { computed, onMounted } from "vue";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { TaskType } from "@/util/type";
import Alymodel from "../../../mysql_interface/model";

const store = useStore(Storekey);
// 当前登录用户
const user = computed(() => {
  return store.state.user;
});
const props = defineProps<{
  selectedTask: Studycodemodel.Iteamjob;
  taskTypeInfoCfg: Record<
    TaskType,
    { title: string; conditionText: (num: number, degree?: number) => string }
  >;
  courses: Alymodel.IMcourse[];
}>();

const taskType = computed(() => {
  return props.selectedTask.type || TaskType.QUESTION;
});

const tableData = computed(() => {
  const data = props.selectedTask.teamjobrelation
    ?.filter((e) => e.userid === user?.value?.ID)
    .map((n) => {
      const e = props.courses.find((z) => z.ID === n.courseid);
      const index =
        props.selectedTask.jobquestion?.find((z) => n.courseid === z.questionid)
          ?.index || 0;
      return {
        ...e,
        state: n.state,
        catebagid: n.catebagid,
        index,
        teamjobid: props.selectedTask.ID,
      };
    })
    .sort((a, b) => a.index - b.index);
  return data || [];
});

onMounted(() => {
  start();
});
async function start() {}

function videoClick(row: any) {
  // 跳转观看视频
  const href = `https://www.hterobot.com/home.html#/course/${row?.ID}?lession=0&catebag=${row.catebagid}`;
  window.open(href, "_blank");
}
</script>

<template>
  <div class="taskItem-container-box">
    <div class="">
      <el-descriptions :title="selectedTask.name" :column="2" size="default">
        <el-descriptions-item :span="2" label="任务完成条件:">
          {{
            taskTypeInfoCfg[taskType].conditionText(
              selectedTask.questionnum || 0,
              selectedTask.questionac
            )
          }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="">
      <el-table :data="tableData" @row-click="videoClick" style="width: 100%">
        <template v-slot:empty>
          <el-empty
            image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png"
          />
        </template>
        <el-table-column prop="ID" label="课程ID" width=""></el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          width=""
        ></el-table-column>
        <el-table-column prop="address" label="我的进度">
          <template #default="{ row }">
            <el-icon>
              <el-icon>
                <circleCheckFilled color="#67C23A" v-show="row.state" />
                <WarningFilled color="#F56C6C" v-show="!row.state" />
              </el-icon>
            </el-icon> </template
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped></style>
